<template>
    <el-card shadow="hover" class="chart-card">
        <div class="card-head" v-if="$slots['card-head']">
            <slot name="card-head"></slot>
        </div>
        <div class="card-content" v-if="$slots['card-content']">
            <slot name="card-content"></slot>
        </div>
        <div class="card-footer" v-if="$slots['card-footer']">
            <slot name="card-footer"></slot>
        </div>
    </el-card>
</template>

<script>
    export default {
      name: 'CardChart'
    }
</script>
<style scoped lang="less">
  .chart-card {
    transition: all 0.3s;
    border-radius: 8px;
    overflow: hidden;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }
    
    .el-card__body {
      padding: 16px !important;
    }
    
    .card-head {
      margin-bottom: 12px;
    }
    
    .card-content {
      position: relative;
      margin-bottom: 12px;
    }
    
    .card-footer {
      border-top: 1px solid #f0f0f0;
      padding-top: 12px;
    }
  }
</style>